/* 
  思路：
    1. 读取index.html文件的内容
    2. 获取到内容中css部分 style标签部分的内容
    3. 把css生成到 demo/index.css
    4. 获取到内容中js部分 script的内容
    5. 生成到 demo/index.js
    6. 把其余的内容生成到  demo/index.html
*/

const fs = require('fs');
const path = require('path');
// 创建正则，获取style里面的所有内容，并分组
const regCss = /<style>([\s\S]*)<\/style>/;
// 创建正则，获取script里面的所有内容，并分组
const regJs = /<script>([\s\S]*)<\/script>/;
// 读取文件
fs.readFile(path.join(__dirname, 'index.html'), 'utf-8', (err, data) => {
    // 读取失败
    if (err) return console.log('读取失败', err);
    // 读取成功
    // console.log('读取成功', data);
    // 调用函数
    css(data);
    js(data);
    html(data);

})
// css函数
function css(data) {
    // 利用正则的规则，拿到数组，第二项是分组出来的内容
    const result = regCss.exec(data);
    fs.writeFile(path.join(__dirname, 'demo', 'index.css'), result[1], 'utf-8', function (err) {
        if (err) return console.log('写入失败');
        console.log('写入成功');
    })
}
// js函数
function js(data) {
    // 利用正则的规则，拿到数组，第二项是分组出来的内容
    const result = regJs.exec(data)[1];
    fs.writeFile(path.join(__dirname, 'demo', 'index.js'), result, 'utf-8', function (err) {
        if (err) return console.log('写入失败');
        console.log('写入成功');
    })
}
// html函数
function html(data) {
    // 把data数据的script和style替换成link和script
    data = data.replace(regCss,'<link rel="stylesheet" href="./index.css">');
    data = data.replace(regJs,'<script src="./index.js"><\/script>');
    fs.writeFile(path.join(__dirname, 'demo', 'index.html'), data, 'utf-8', function (err) {
        if (err) return console.log('写入失败');
        console.log('写入成功');
    })
}